<template>
  <div style="text-align: -webkit-left; padding-bottom: 100px; padding-top: 46px;">
    <div class="header">
      <div @click="fanhui" style="color: #1989fa; position:fixed; font-size:14px;margin-left:16px;">
        <van-icon name="arrow-left" v-if="show1"/>
      </div>
      <p style="text-align: center; font-weight: bold; font-size: 20px;">购物车</p>
    </div>
    <div class="list" v-for="(val, k) in data" :key="k">
      <input type="checkbox" class="tui-checkbox" v-model="val.checked" @change="_checkAll(val)" style="position: relative;top: 15px;left: 5px;">
      <div class="hello" style="height:2rem;line-height:2rem;margin-left: 32px;position: relative;top: -15px;">
        <div class="icon">
          <van-image
            round
            width="2rem"
            height="2rem"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
          />
        </div>
        <div class="p" style="margin-top:.2rem;font-size:.9rem">
          <p>{{val.dpname}}</p>
        </div>
      </div>
      <ul v-for="(item, index) in val.goods" :key="item.id" style="position: relative;top: -23px;">
        <li>
          <input type="checkbox" class="tui-checkbox" v-model="item.checked" @change="handleCheck(item,index)" style="position: relative;
      top: 65px;left: 5px;">
            <van-swipe-cell :on-close="onClose" style="position: relative;
      margin-left: 30px;">
              <van-card
                :title="item.title"
                :desc="item.desc"
                :num="item.num"
                :price="formatPrice(item.price)"
                :thumb="item.thumb"
              />
              <div style="position: absolute;
          top: 83px;
          right: 0;">
                <van-button size="mini" @click="jian(item,index)">-</van-button>
                <van-button size="mini" @click="jia(item,index)">+</van-button>
              </div>
              <template slot="right">
                <div style="width:50px;text-align: center; background: red; color: #fff;">
                <van-icon name="delete" style="position: relative;
                  top: 45%;line-height: 106px;"/>
                </div>
              </template>
            </van-swipe-cell>
        </li>
      </ul>
    </div>
    <div style="position: fixed;
    bottom: 60px;
    z-index: 1000;
    left: 5px;">
    <input type="checkbox" v-model="checkedAll" class="tui-checkbox" @change="checkAll"> 全选
    </div>
    <van-submit-bar
      :price="price"
      :button-text="submitBarText"
      @submit="onSubmit"
      style="bottom:50px;"></van-submit-bar>
    <van-action-sheet v-model="show" title="确定订单" style="min-height: 50%;padding-bottom:50px;">
      <cartfukuang></cartfukuang>
    </van-action-sheet>
  </div>
</template>

<script>
import cartfukuang from './components/fu'
export default {
  name: 'cart',
  components: {
    cartfukuang
  },
  data () {
    return {
      checkedAll: false,
      show: false,
      price: 0.00,
      show1: false,
      data: [{
        dpname: '天猫旗舰店',
        goods: [{
          id: '0',
          title: '进口香蕉',
          desc: '约250g，2根',
          price: 200,
          num: 1,
          thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg'
        }, {
          id: '1',
          title: '陕西蜜梨',
          desc: '约600g',
          price: 690,
          num: 1,
          thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg'
        }, {
          id: '2',
          title: '美国伽力果',
          desc: '约680g/3个',
          price: 2680,
          num: 1,
          thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg'
        }]
      }, {
        dpname: '天猫旗舰店1',
        goods: [{
          id: '3',
          title: '进口香蕉1',
          desc: '约250g，2根',
          price: 200,
          num: 1,
          thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg'
        }, {
          id: '4',
          title: '陕西蜜梨1',
          desc: '约600g',
          price: 690,
          num: 1,
          thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg'
        }, {
          id: '5',
          title: '美国伽力果1',
          desc: '约680g/3个',
          price: 2680,
          num: 1,
          thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg'
        }]
      }]
    }
  },
  activated () {
    console.log('-----cart activated-----')
  },
  mounted () {
    console.log('-----cart mounted-----')
    this.data.forEach(item => {
      this.$set(item, 'checked', false)
      if (item.goods) {
        item.goods.forEach((citem) => {
          this.$set(citem, 'checked', false)
        })
      }
    })
    this.show1 = this.$route.query.show
  },
  methods: {
    // 结算全选按钮
    checkAll () { // 点击时候this.checkedAll就会置为相反的值
      this.data.forEach(item => { // 循环店铺
        item.checked = this.checkedAll // 将店铺的状态置为'this.checkedAll'同样的值
        if (item.goods) {
          item.goods.forEach((citem) => { // 循环店铺下的商品
            citem.checked = this.checkedAll // 商品选择状态置为'this.checkedAll'同样的值
          })
        }
      })
      this.checkChangePrice()
    },
    // 店铺全选按钮
    _checkAll (val) { // 传入当前店铺的信息
      val.goods.forEach(item => { // 循环店铺的商品信息
        item.checked = val.checked // 将商品的选择状态置为'val.checked'同样的值
      })
      // 判断店铺的状态是否都勾选上，勾选上的话就将全选按钮勾选上
      if (this.data.every(item => item.checked)) { // data.every() 数组里面所有的元素都有符合条件,才返回true
        this.checkedAll = true
      } else {
        this.checkedAll = false
      }
      this.checkChangePrice()
    },
    // 商品点击选择按钮
    handleCheck (item, index) {
      var check = []
      this.data.forEach((items, index) => { // 循环所有的店铺数据
        if (items.goods) {
          // 判断商品的状态是否都全选上了
          var bool = items.goods.every(citem => citem.checked) // data.every() 数组里面所有的元素都有符合条件,才返回true
          if (bool) { // 所有的商品都全选上时，将店铺的全选按钮勾选上
            items.checked = true
          } else {
            items.checked = false
          }
          check.push(bool)
        }
      })
      // 判断店铺的状态是否都勾选上，够勾选上了的话则将结算全选勾选上
      if (check.indexOf(false) === -1) { // indexOf 不存在则返回-1
        this.checkedAll = true
      } else {
        this.checkedAll = false
      }
      this.checkChangePrice()
    },
    checkChangePrice () { // 金额变化
      let amount = 0
      this.data.forEach((item, index) => { // 循环所有的店铺数据
        if (item.goods) {
          item.goods.forEach(items => { // 循环店铺下的商品
            if (items.checked) {
              amount += (items.price * 100) * items.num
            }
          })
        }
      })
      this.price = amount
    },
    formatPrice (price) {
      return price.toFixed(2)
    },
    onSubmit () {
      this.show = true
    },
    fanhui () {
      this.$router.go(-1)
    },
    onClose (clickPosition, instance) {
      switch (clickPosition) {
        case 'outside':
          instance.close()
          break
        case 'right':
          this.$dialog.confirm({
            message: '确定删除吗？'
          }).then(() => {
            alert('删除成功')
          }).catch(() => {
          })
          break
      }
    },
    jian (item, index) { // 数量减
      item.num > 1 ? item.num-- : item.num = 1
      this.checkChangePrice()
    },
    jia (item, index) { // 数量加
      item.num++
      this.checkChangePrice()
    },
    totalPrice () {
    }
  },
  computed: {
    submitBarText () {
      return '结算'
    }
  }
}
</script>
<style scoped>
.hello{
height: 3rem;
line-height: 3rem;
overflow: hidden;
}
.header{
  height: 46px;
  line-height: 46px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid #f2f2f2;
}
.icon{
float: left;
margin-left: 10px;
}
p{
margin: 0;
padding: 0;
}
.tui-checkbox:checked {
background:#1673ff;
}
.tui-checkbox {
width:25px;
height:25px;
background-color:#ffffff;
border:solid 1px #dddddd;
-webkit-border-radius:50%;
border-radius:50%;
font-size:0.8rem;
margin:0;
padding:0;
position:relative;
display:inline-block;
vertical-align:top;
cursor:default;
-webkit-appearance:none;
-webkit-user-select:none;
user-select:none;
-webkit-transition:background-color ease 0.1s;
transition:background-color ease 0.1s;
}
.tui-checkbox:checked::after {
content:'';
top:5px;
left:5px;
position:absolute;
background:transparent;
border:#fff solid 2px;
border-top:none;
border-right:none;
height:6px;
width:10px;
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}
</style>
